<!-- HR主控面板 -->
<template>
  <div>
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#00c1c1" text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" style="font-size: 18px;"> HR 后台工作面板</el-menu-item>
    </el-menu>
    <!-- 左侧导航菜单部分 -->
    <el-col :span="3" :offset="0">
      <el-menu default-active="1" class="el-menu-vertical-demo">
        <el-menu-item index="1" @click="addTab('JOB')">
          <i class="el-icon-suitcase"></i>
          <span slot="title">职位管理</span>
        </el-menu-item>
        <el-menu-item index="2" @click="addTab('COMPANY')">
          <i class="el-icon-office-building"></i>
          <span slot="title">我的公司</span>
        </el-menu-item>
        <el-menu-item index="3" @click="addTab('INTERVIEWS')">
          <i class="el-icon-date"></i>
          <span slot="title">面试管理</span>
        </el-menu-item>
        <el-menu-item index="4" @click="addTab('RESUMES')">
          <i class="el-icon-box"></i>
          <span slot="title">收集简历</span>
        </el-menu-item>
        <el-menu-item index="5" @click="addTab('MSGS')">
          <i class="el-icon-chat-line-round"></i>
          <span slot="title">消息中心</span>
        </el-menu-item>
        <el-menu-item index="6" @click="addTab('MYINFO')">
          <i class="el-icon-user"></i>
          <span slot="title">个人中心</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <!-- tab部分 -->
    <el-col :span="21" :offset="0">
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
        <el-tab-pane :name="'0'" :key="-1" :label="'默认页'" :closable="false">
          <h1 class="tip-main"> HR 后台工作系统</h1>
        </el-tab-pane>
        <el-tab-pane v-for="(item, index) in tabsItem" :key="item.name" :label="item.title" :name="item.name">

          <!-- 注意这里把addTab传给了孩子组件，因此子页面也可以打开新的Tab -->
          <component :is="item.content" :openTab="addTabWithParams" :extra_data="item.extra_data"></component>
        </el-tab-pane>
      </el-tabs>
    </el-col>


  </div>
</template>

<script>


export default {
  data() {
    return {
      // 当前打开的页面ID
      editableTabsValue: '0',
      nameCount: 20,
      // 预制的，准备放入到右侧进行打开的Tab项
      mapNavToItem: {

        "JOB": {
          title: "职位管理",
          name: "1",
          content: MyJobs
        },
        "COMPANY": {
          title: "公司信息管理",
          name: "2",
          content: MyCompany
        },
        "MYINFO": {
          title: "我的信息",
          name: "3",
          content: MyInfo
        },
        "RESUMES": {
          title: "已收简历",
          name: "4",
          content: MyRecvedResumes
        },
        "MSGS": {
          title: "我的消息",
          name: "5",
          content: MyMsgs
        },
        "INTERVIEWS": {
          title: "我的面试",
          name: "6",
          content: MyInterviews
        }
      },
      // 右侧打开的Tab列表
      tabsItem: [],

      tabIndex: 1
    }
  },
  methods: {
    // 带参数的addTab，用于子页面打开子页面的情况
    addTabWithParams(flag, params) {
      if (flag == 'RESUMES_OF_JOB') {
        let job = params
        console.log(job)
        let toBeAddedItem = {
          title: "已收简历:" + job.title,
          content: ResumesOfJob,
          extra_data: { "JOB": job }
        }
        let find = false
        // 已经打开过
        this.tabsItem.forEach(item => {
          console.log("item " + item.title)
          if (item.title == toBeAddedItem.title) {
            // 切换
            console.log("match")
            this.editableTabsValue = item.name
            find = true;
            return
          }
        })
        // 没有打开过
        if (!find) {
          // 打开新的
          toBeAddedItem.name = this.nameCount++
          toBeAddedItem.name += ''
          this.tabsItem.push(toBeAddedItem)
          this.editableTabsValue = toBeAddedItem.name

        }
      }
    },
    // 标准的addTab
    addTab(targetName) {
      let toBeAddedItem = this.mapNavToItem[targetName]
      //  如果已经打开过，那么切换到这个tab
      if (this.tabsItem.includes(toBeAddedItem)) {
        this.editableTabsValue = toBeAddedItem.name
        return
      }

      let newTabName = ++this.tabIndex + '';
      this.tabsItem.push(toBeAddedItem);
      this.editableTabsValue = toBeAddedItem.name;
    },
    removeTab(targetName) {
      console.log(targetName)
      let tabs = this.tabsItem;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.tabsItem = tabs.filter(tab => tab.name !== targetName);
    }
  },
  mounted() {
    console.log(this.$store.getters.get_token)
    hrPanelApis.redisTokenToHR(this.$store.getters.get_token).then(
      resp => {
        console.log(resp.data)
        if (resp.data.code == 200) {
          console.log("登陆成功！")
          this.$message.success("登陆成功！")
          this.$store.commit('setHrId', resp.data.data.id)
          this.$store.commit('setHR', resp.data.data)
          console.log(this.$store.getters.hr)
        } else {
          this.$message.error(resp.data.msg)

        }
      }
    )
  }
}
</script>

<style >
.tip-main {
  margin: 40px auto;
  color: #eee;
  display: block;
  width: 600px;
  height: 150px;
  font-size: 60px;
}
</style>